<template>
    <div class="gva-card-box statebox">
        <el-row :gutter="12">
            <el-col :span="6" :xs="12">
                <el-card shadow="hover">
                    <div class="tit">总销售额</div>
                    <div class="num">
                        <AnimatedNumber :from="0" :to="12560">
                            <template #default="{ option, item }">
                                <span>￥{{ item.number }}</span>
                            </template>
                        </AnimatedNumber>
                    </div>
                    <div class="info">
                        <AnimatedNumber :from="0" :to="8869">
                            <template #default="{ option, item }">
                                <span>日销售额：￥{{ item.number }}</span>
                            </template>
                        </AnimatedNumber>
                    </div>
                </el-card>
            </el-col>
            <el-col :span="6" :xs="12">
                <el-card shadow="hover">
                    <div class="tit">用户注册</div>
                    <div class="num">
                        <AnimatedNumber :from="0" :to="8846" />
                    </div>
                    <div class="info">
                        <AnimatedNumber :from="0" :to="1423">
                            <template #default="{ option, item }">
                                <span>日注册量：{{ item.number }}</span>
                            </template>
                        </AnimatedNumber>
                    </div>
                </el-card>
            </el-col>
            <el-col :span="6" :xs="12">
                <el-card shadow="hover">
                    <div class="tit">访问量</div>
                    <div class="num">
                        <AnimatedNumber :from="0" :to="6560" />
                    </div>
                    <div class="info">
                        <AnimatedNumber :from="0" :to="2423">
                            <template #default="{ option, item }">
                                <span>日访问量：{{ item.number }}</span>
                            </template>
                        </AnimatedNumber>
                    </div>
                </el-card>
            </el-col>
            <el-col :span="6" :xs="12">
                <el-card shadow="hover">
                    <div class="tit">支付笔数</div>
                    <div class="num">
                        <AnimatedNumber :from="0" :to="12589" />
                    </div>
                    <div class="info">
                        <AnimatedNumber :from="0" :to="80">
                            <template #default="{ option, item }">
                                <span>转化率：{{ item.number }} %</span>
                            </template>
                        </AnimatedNumber>
                    </div>
                </el-card>
            </el-col>
        </el-row>
    </div>
</template>
<script setup>
</script>
<style lang="scss" scoped>
.statebox {
    .el-card {
        padding: 10px;
        margin-bottom: 5px;
    }

    .tit {
        height: 22px;
        color: rgba(0, 0, 0, .45);
        font-size: 14px;
        line-height: 22px;
    }

    .num {
        height: 38px;
        margin-top: 10px;
        color: rgba(0, 0, 0, .75);
        font-size: 32px;
        line-height: 38px;
        white-space: nowrap;
        font-weight: bold;
        text-overflow: ellipsis;
        word-break: break-all;
    }

    .info {
        position: relative;
        width: 100%;
        margin-top: 20px;
    }
}</style>